window.onload = function () {
  //点击返回顶部按钮闪现回到顶部
  let GoBackTop = document.querySelector("#GoBackTop");
  GoBackTop.addEventListener("click",(event)=>{
    window.scroll(0,0);
    event.cancelBubble = true;
  })

  //封装动画函数
  function animate(obj, target, callback) {
    clearInterval(obj.times);
    obj.times = setInterval(function () { 
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            clearInterval(obj.times);
            callback && callback();
        }
        window.scroll(0, window.pageYOffset + step);
    }, 20)
  }

//点击返回顶部框优雅返回页面顶部
  let goBack = document.querySelector("#goBack");
  goBack.addEventListener("click",()=>{
    animate(window,0);
  })

  //滚轮滚动事件，滚到一定距离显示或隐藏返回顶部按钮
  let K5OBox = document.querySelector(".K5OBox");
  document.addEventListener("scroll",(event)=>{
    scrollY>=K5OBox.offsetTop?goBack.style.display="block":goBack.style.display="none";
  })

  //鼠标移入移除购物车模块事件
  $("#shopCar").hover(
    function () {
      $(this).css("background-color", "#FFFFFF");
      $(".shopCarTip").stop().slideDown(200);
    },
    function () {
      $(this).css("background-color", "#424242");
      $(".shopCarTip").stop().slideUp(200);
    }
  );

  //封装搜索框失焦修改样式函数
  let inputBlur = () => {
    blurBanner.style.display = "none";
    inputBox.style.borderColor = "#ccc";
    blurSpan.style.borderColor = "#ccc";
    input.blur();
  };
  //搜索关键词数据初始化
  let blurNameArr = [
    "全部商品",
    "红米",
    "手机",
    "黑鲨5",
    "冰箱",
    "电视",
    "洗衣机",
    "Redmi G 2021",
  ];
  let inputBox = document.querySelector(".inputBox");

  let newblurBanner = document.createElement("div");
  newblurBanner.classList.add("blurBanner");
  for (let i = 0; i < blurNameArr.length; i++) {
    let newblurBannerLis = document.createElement("div");
    newblurBannerLis.classList.add("blurBannerLis");
    newblurBannerLis.innerText = blurNameArr[i];
    newblurBanner.appendChild(newblurBannerLis);
  }
  inputBox.appendChild(newblurBanner);
  //输入框聚焦事件
  let input = document.querySelector("#input");
  let blurBanner = document.querySelector(".blurBanner");
  let blurSpan = document.querySelector("#blurSpan");
  input.addEventListener("focus", function () {
    blurBanner.style.display = "block";
    inputBox.style.borderColor = "#FF6700";
    blurSpan.style.borderColor = "#FF6700";
  });
  //输入框失焦事件
  input.addEventListener("blur", function () {
    inputBlur();
  });

  //鼠标移入移除头部商品导航栏区域
  let shopArr = [
    {
      imgUrl:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7a15df55e98e4163390096ed05b1ef5.png",
      name: "Xiaomi 12S Ultra",
      price: "5999元起",
    },
    {
      imgUrl:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1e1f915167554e99916273b5269da1b5.png",
      name: "Redmi Note 11T Pro+",
      price: "2099元起",
    },
    {
      imgUrl:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6511d77270e94146c0b1f96b66d8cc58.png",
      name: "Redmi智能电视X55 2022",
      price: "2999元",
    },
    {
      imgUrl:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f306e56e070eec07b985baf8f1f57e8.png",
      name: "Xiaomi Book Pro 14 2022",
      price: "6799元起",
    },
    {
      imgUrl:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4be9f7bb741c25376594976ea5451842.png",
      name: "巨省电 3匹|变频|新一级能效（鎏金款）",
      price: "6999元",
    },
    {
      imgUrl:
        "	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a759fa795d749f0538cfd2a15890027.png",
      name: "小米路由器AX6000",
      price: "549元",
    },
    {
      imgUrl:
        "	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03892b203a6413bcd8ef3f92d77df79c.gif",
      name: "小米平板5",
      price: "1999元起",
    },
  ];
  let shopName = document.querySelector(".shopName").children;
  let navBanner = document.querySelector("#navBanner");
  for (let i = 0; i < shopName.length - 2; i++) {
    let getshopLists = document.createElement("div");
    getshopLists.classList.add("shopLists");
    for (let j = 0; j < 6; j++) {
      let getshopList = document.createElement("div");
      getshopList.classList.add("shopList");
      let getimgBox = document.createElement("div");
      getimgBox.classList.add("imgBox");
      getimgBox.innerHTML =
        `<img width="100%" src="` + shopArr[i].imgUrl + `" alt="">`;
      getshopList.appendChild(getimgBox);
      let getP = document.createElement("p");
      getP.innerText = shopArr[i].name;
      getshopList.appendChild(getP);
      let getSpan = document.createElement("span");
      getSpan.innerText = shopArr[i].price;
      getshopList.appendChild(getSpan);
      getshopLists.appendChild(getshopList);
    }
    navBanner.appendChild(getshopLists);
  }

  let shopLists = document.querySelectorAll(".shopLists");
  let key;
  for (let i = 0; i < shopName.length - 2; i++) {
    shopName[i].addEventListener("mouseover", function () {
      shopLists[i].style.display = "flex";
      $("#navBanner").stop().slideDown(200);
      inputBlur();
      key = i;
    });
    shopName[i].addEventListener("mouseout", function () {
      $("#navBanner").stop().slideUp(200);
      shopLists[i].style.display = "none";
    });
  }


  $("#navBanner").hover(
    function () {
      $(this).stop().css("display", "block");
      shopLists[key].style.display = "flex";
    },
    function () {
      $(this).stop().slideUp(200);
      shopLists[key].style.display = "none";
    }
  );

  //中间轮播图部分数据初始化
  let sliderNameArr = [
    "手机",
    "电视",
    "笔记本 平板",
    "出行 穿戴",
    "耳机 音箱",
    "家电",
    "智能 路由器",
    "电源 配件",
    "健康 儿童",
    "生活 箱包",
  ];
  let imgBannerArr = [
    "./image/move1.jpg",
    "./image/move2.jpg",
    "./image/move3.jpg",
    "./image/move4.jpg",
  ];
  let shopsArr = [
    {
      children: [
        {
          src: "./image/11.png",
          name: "Xiaomi 11 青春活力版",
        },
        {
          src: "./image/12.png",
          name: "Note 11 Pro 系列",
        },
        {
          src: "./image/13.png",
          name: "Redmi K40S",
        },
        {
          src: "./image/14.png",
          name: "Xiaomi 12S Ultra",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/21.png",
          name: "小米电视6 至尊版 55英寸",
        },
        {
          src: "./image/22.png",
          name: "米家激光投影仪",
        },
        {
          src: "./image/23.png",
          name: "小米自拍4K高清投屏器",
        },
        {
          src: "./image/24.png",
          name: "小米电视6 至尊版 65英寸",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/31.png",
          name: "小米笔记本Pro 14 增强版",
        },
        {
          src: "./image/32.png",
          name: "小米笔记本   Pro 14",
        },
        {
          src: "./image/33.png",
          name: "小米笔记本 Pro 15 增强版",
        },
        {
          src: "./image/34.png",
          name: "RedmiBook Pro 15 2022",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/41.png",
          name: "小米手环6 NFC 版",
        },
        {
          src: "./image/42.jpg",
          name: "石英表",
        },
        {
          src: "./image/43.jpg",
          name: "小米手环7 NFC版",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/51.png",
          name: "小米小爱触屏音箱",
        },
        {
          src: "./image/52.png",
          name: "小米小爱音箱 Play",
        },
        {
          src: "./image/53.png",
          name: "Xiaomi 真无线降噪耳机3",
        },
        {
          src: "./image/54.jpg",
          name: "线控耳机",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/61.png",
          name: "水壶",
        },
        {
          src: "./image/62.png",
          name: "电暖气",
        },
        {
          src: "./image/63.jpg",
          name: "料理机",
        },
        {
          src: "./image/64.png",
          name: "滚筒洗衣机",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/71.jpg",
          name: "喷式打印机墨水",
        },
        {
          src: "./image/72.jpg",
          name: "视频门铃",
        },
        {
          src: "./image/73.png",
          name: "摄像机",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/81.png",
          name: "电池",
        },
        {
          src: "./image/82.jpg",
          name: "黑鲨配件",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/91.png",
          name: "充电器",
        },
        {
          src: "./image/92.png",
          name: "益智积木",
        },
        {
          src: "./image/93.jpg",
          name: "智能遥控车",
        },
      ],
    },
    {
      children: [
        {
          src: "./image/101.jpg",
          name: "保温杯",
        },
        {
          src: "./image/102.png",
          name: "旅行箱",
        },
        {
          src: "./image/103.png",
          name: "驱蚊器",
        },
      ],
    },
  ];
  let homeHeroBanner = document.querySelector(".homeHeroBanner");

  //左边导航栏部分
  let newHomeHeorSlider = document.createElement("div");
  newHomeHeorSlider.classList.add("homeHeorSlider");
  for (let i = 0; i < sliderNameArr.length; i++) {
    let newA = document.createElement("a");
    newA.classList.add("sliders");
    let newShiderName = document.createElement("div");
    newShiderName.classList.add("shiderName");
    newShiderName.innerText = sliderNameArr[i];
    newA.appendChild(newShiderName);
    let newSpan = document.createElement("span");
    newSpan.innerHTML = "&#xe609;";
    newSpan.classList.add("iconfont");
    newSpan.classList.add("rightIcon");
    newA.appendChild(newSpan);
    newHomeHeorSlider.appendChild(newA);
  }
  homeHeroBanner.appendChild(newHomeHeorSlider);

  //商品列表部分
  for (let i = 0; i < shopsArr.length; i++) {
    let newhomeHeorSliderShops = document.createElement("div");
    newhomeHeorSliderShops.classList.add("homeHeorSliderShops");
    for (let j = 0; j < shopsArr[i].children.length; j++) {
      let newshopBoxs = document.createElement("div");
      newshopBoxs.classList.add("shopBoxs");
      for (let k = 0; k < 6; k++) {
        let newshopBoxsContent = document.createElement("a");
        newshopBoxsContent.classList.add("shopBoxsContent");
        let newshopsImg = document.createElement("div");
        newshopsImg.classList.add("shopsImg");
        let shopsImgpic = document.createElement("img");
        shopsImgpic.src = shopsArr[i].children[j].src;
        newshopsImg.appendChild(shopsImgpic);
        newshopBoxsContent.appendChild(newshopsImg);
        let newP = document.createElement("p");
        newP.innerText = shopsArr[i].children[j].name;
        newshopBoxsContent.appendChild(newP);
        newshopBoxs.appendChild(newshopBoxsContent);
      }
      newhomeHeorSliderShops.appendChild(newshopBoxs);
    }
    homeHeroBanner.appendChild(newhomeHeorSliderShops);
  }

  //鼠标移入移出左边商品导航栏区域动画实现
  let homeHeorSlider = document.querySelector(".homeHeorSlider").children;
  let homeHeorSliderShops = document.querySelectorAll(".homeHeorSliderShops");
  for (let i = 0; i < homeHeorSlider.length; i++) {
    homeHeorSlider[i].addEventListener("mouseover", function () {
      homeHeorSliderShops[i].style.display = "flex";
    });
    homeHeorSlider[i].addEventListener("mouseout", function () {
      homeHeorSliderShops[i].style.display = "none";
    });
    homeHeorSliderShops[i].addEventListener("mouseover", function () {
      this.style.display = "flex";
    });
    homeHeorSliderShops[i].addEventListener("mouseout", function () {
      this.style.display = "none";
    });
  }

  //右边轮播图部分
  let newSwarpper = document.createElement("div");
  newSwarpper.classList.add("swarpper");
  let newImgBanner = document.createElement("div");
  newImgBanner.classList.add("imgBanner");
  let newImg = document.createElement("img");
  newImg.src = imgBannerArr[0];
  newImgBanner.appendChild(newImg);
  newSwarpper.appendChild(newImgBanner);
  let newLeftBtn = document.createElement("div");
  newLeftBtn.classList.add("leftBtn");
  let LeftSpan = document.createElement("span");
  LeftSpan.classList.add("iconfont");
  LeftSpan.innerHTML = "&#xe729;";
  newLeftBtn.appendChild(LeftSpan);
  newSwarpper.appendChild(newLeftBtn);
  let newRightBtn = document.createElement("div");
  newRightBtn.classList.add("rightBtn");
  let RightSpan = document.createElement("span");
  RightSpan.classList.add("iconfont");
  RightSpan.innerHTML = "&#xe62e;";
  newRightBtn.appendChild(RightSpan);
  newSwarpper.appendChild(newRightBtn);
  let newCirls = document.createElement("div");
  newCirls.classList.add("cirls");
  let cirlsStr = `<span class="white"></span>`;
  for (let i = 0; i < imgBannerArr.length - 1; i++) cirlsStr += "<span></span>";
  newCirls.innerHTML = cirlsStr;
  newSwarpper.appendChild(newCirls);
  homeHeroBanner.appendChild(newSwarpper);

  //轮播图区域动画实现
  let leftBtn = document.querySelector(".leftBtn");
  let rightBtn = document.querySelector(".rightBtn");
  let moveImg = document.querySelector(".imgBanner").children;
  let swarpper = document.querySelector(".swarpper");
  let cirls = document.querySelector(".cirls").children;
  let index = 0;

  //封装改变小圆圈样式函数
  let ChColor = (k) => {
    for (let i = 0; i < imgBannerArr.length; i++) {
      cirls[i].style.borderColor = "rgba(255,255,255,0.3)";
      cirls[i].style.backgroundColor = "#545a62";
      cirls[i].addEventListener("mouseover", function () {
        this.style.borderColor = "#545a62";
        this.style.backgroundColor = "white";
      });
      cirls[i].addEventListener("mouseout", function () {
        if (i != k) {
          this.style.borderColor = "rgba(255,255,255,0.3)";
          this.style.backgroundColor = "#545a62";
        } else {
          this.style.borderColor = "#545a62";
          this.style.backgroundColor = "white";
        }
      });
    }
    cirls[k].style.borderColor = "#545a62";
    cirls[k].style.backgroundColor = "white";
  };

  //封装图片移动函数
  let move = (direction, k) => {
    if (direction == "left") {
      index == 0 ? (index = imgBannerArr.length - 1) : index--;
      moveImg[0].src = imgBannerArr[index];
      // $(".imgBanner>img").fadeTo(20, 0.5);
      moveImg[0].style.transition='all .4s';
      ChColor(index);
    }
    if (direction == "right") {
      index == imgBannerArr.length - 1 ? (index = 0) : index++;
      moveImg[0].src = imgBannerArr[index];
      // $(".imgBanner>img").fadeTo(20, 0.5);
      ChColor(index);
    }
    if (direction == "normal") {
      moveImg[0].src = imgBannerArr[k];
      // $(".imgBanner>img").fadeTo(20, 0.5);
      ChColor(k);
    }
    // moveImg[0].style.opacity=1;
  };
  //左击按钮
  leftBtn.addEventListener("click", function () {
    move("left");
    inputBlur();
  });
  //右击按钮
  rightBtn.addEventListener("click", function () {
    move("right");
    inputBlur();
  });
  //设置定时器
  let timer = setInterval(function () {
    move("right");
  }, 3000);
  //鼠标移入清除定时器
  swarpper.addEventListener("mouseover", function () {
    clearInterval(timer);
  });
  //鼠标移出设置定时器
  swarpper.addEventListener("mouseout", function () {
    timer = setInterval(function () {
      move("right");
    }, 3000);
  });

  //点击小圆圈实现图片轮播
  for (let i = 0; i < imgBannerArr.length; i++) {
    cirls[i].addEventListener("click", function () {
      move("normal", i);
      inputBlur();
    });
  }
};
